import React, { Component } from 'react'

export default class LifeCycle extends Component {
  /**
   * constructor的主要的工作如下
   * 1、初始化state
   * 2、绑定方法
   * 3、createRef方法的调用
   */
  constructor(){
    super()
    console.log('-------constructor-----------');
    this.state={count:0}
  }
  /**
   * render方法用来渲染页面的方法
   * 该方法横跨挂载阶段和更新阶段
   * 在挂载阶段会执行一次，这次执行是在constructor执行之后，componentDidMount之前执行
   * 共执行1+n
   * 更新阶段有三种情况下会执行render
   * 1)调用setState
   * 2)当外部props数据发生变化之后
   * 3)forceUpdate也会执行
   */
  render() {
    console.log('-------render-----------');
    return (
      <div>
        <h1>生命周期</h1>
        <div>
            {this.state.count}
            <button onClick={()=>this.setState({count:this.state.count+1})}>+</button>
            <button onClick={()=>{
                this.state.count=this.state.count+1
                console.log('count:',this.state.count);
                this.state.count=this.state.count+5
                console.log('count:',this.state.count);
                this.forceUpdate()
            }}>+</button>
        </div>
      </div>
    )
  }
  /**
   * 页面完之后会调用,这里完成如下操作
   * 1、向后端发送网络请求(xhr,fetch)
   * 2、定时器的初始化
   * 3、事件总线的初始绑定
   * 4、原始的DOM的绑定
   */
  componentDidMount(){
    console.log('-------componentDidMount-----------');
    window.setInterval(()=>{
        this.setState({count:this.state.count+1})
    },500)

  }
  componentDidUpdate(){
    console.log('-------componentDidUpdate-----------');
  }
  componentWillUnmount(){
    console.log("-------componentWillUnmount------------");
  }

}
